<template>
  <ele-modal
    :width="750"
    :visible="visible"
    :confirm-loading="loading"
    :title="'回仓原因'"
    :body-style="{ paddingBottom: '40px' }"
    :footer="null"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="[24, 24]">
        <a-col :md="23" :sm="23" :xs="23">
          <span class="ele-text-primary hands" @click="addShow = true"
            >+新建</span
          >
        </a-col>
        <a-col :md="23" :sm="23" :xs="23">
          <vxe-table ref="tableRef" :data="tableData">
            <vxe-column field="content" title="回仓原因" />
            <vxe-column title="顺序">
              <template #default="{ row }">
                <a-space>
                  <img
                    class="hands"
                    src="@/assets/to-prev.png"
                    @click="setPos(row, 1)"
                  />
                  <img
                    class="hands"
                    src="@/assets/to-next.png"
                    @click="setPos(row, 2)"
                  />
                </a-space>
              </template>
            </vxe-column>
            <vxe-column title="操作">
              <template #default="{ row }">
                <a-space>
                  <a @click="actionOpt(row, 'edit')">修改</a>
                  <a @click="actionOpt(row, 'delete')">删除</a>
                </a-space>
              </template>
            </vxe-column>
          </vxe-table>
          <div class="margin-top-15">
            <vxe-pager
              size="mini"
              s
              :current-page="tablePage.currentPage"
              :page-size="tablePage.pageSize"
              :total="tablePage.total"
              :layouts="[
                'PrevJump',
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'NextJump',
                'FullJump',
                'Total'
              ]"
              @page-change="handlePageChange"
            />
          </div>
        </a-col>
      </a-row>
    </a-form>
    <add
      v-if="addShow"
      v-model:visible="addShow"
      :actionStatus="actionStatus"
      :reason="reason"
      @done="getNewList"
    />
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form, message, Modal } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import add from './add.vue';
  import {
    get_reason_list,
    deletereasons,
    editsortreasons
  } from '@/api/jewelry/receipts_return';

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    // 编辑数据id
    editData: Object,
    storeId: String
  });

  const emit = defineEmits(['done', 'update:visible', 'getReason']);

  // 提交状态
  const loading = ref(false);
  const actionStatus = ref('add');
  const reason = ref({});
  const addShow = ref(false);
  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
    receipts_type:6
  });
  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
    getList();
  };
  const tableData = ref([]);

  onMounted(() => {
    getList();
  });
  const getList = () => {
    get_reason_list({
      page: tablePage.currentPage,
      page_size: tablePage.pageSize,
      filters:{receipts_type:tablePage.receipts_type}
    })
      .then((res) => {
        tablePage.total = res.total;
        tableData.value = res.data;
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const setPos = (row, type) => {
    console.log(row, type);
    editsortreasons({ id: row.id, type: type })
      .then((res) => {
        message.success(res.msg);
        setTimeout(() => {
          getNewList();
        }, 500);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const actionOpt = (row, type) => {
    console.log(row, type);
    if (type == 'edit') {
      actionStatus.value = 'edit';
      addShow.value = true;
      reason.value = {
        id: row.id,
        content: row.content
      };
    } else if (type == 'delete') {
      Modal.confirm({
        title: '提示',
        content: '确定删除?',
        maskClosable: true,
        onOk: () => {
          deletereasons({ id: row.id })
            .then((res) => {
              getNewList();
            })
            .catch((e) => {
              message.error(e);
            });
        }
      });
    }
  };
  const save = () => {};
  const getNewList = () => {
    tablePage.currentPage = 1;
    tableData.value = [];
    getList();
  };

  /* 更新visible */
  const updateVisible = (value) => {
    emit('getReason');
    emit('update:visible', value);
  };
</script>
<style scoped></style>
